<ion-header>

    <ion-navbar>
        <ion-title style="text-align:center">{{'text-mnemonic' | translate}}</ion-title>
    </ion-navbar>

</ion-header>
<ion-content>
    <div class="mnemonic">
        <div class="slide-container">
            <div class="slide-title">{{ 'text-mnemonic-prompt' | translate}}</div>
            <div class="slide-body">
                <div class="phrase-container">
                    <div class="phrase">
                        <span *ngFor="let item of mnemonicList;let i=index">
                      <span>{{item.text}}</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="mnemonic-password">
                <ion-list>
                    <ion-item>
                        <ion-label style="font-size:15px">{{'showmnes-optionalpassword1-title' | translate }}</ion-label>
                        <ion-toggle [(ngModel)]="isSelect"></ion-toggle>
                    </ion-item>

                    <ion-item *ngIf="isSelect">
                        <ion-input type="password" placeholder="{{ 'showmnes-optionalpassword1-placeholder' | translate }}" [(ngModel)]="mnemonicPassword"></ion-input>
                    </ion-item>

                    <ion-item *ngIf="isSelect">
                        <ion-input type="password" placeholder="{{ 'showmnes-optionalpassword2-placeholder' | translate }}" [(ngModel)]="mnemonicRepassword"></ion-input>
                    </ion-item>

                </ion-list>
            </div>
        </div>
    </div>
</ion-content>
<ion-footer>
    <button ion-button (click)="onNext()" full>{{ 'text-memory' | translate }}</button>
</ion-footer>